<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
</head>
<body>
    <h1>属性选择器</h1>
    <h1>通配符</h1>
    <table cellspacing="0px" cellpadding="0px" border="1px">
        <tr>
            <td>格式</td>
            <td>作用</td>
        </tr>
         <tr>
            <td>[attribute~="value"]</div></td>
            <td>选择属性值中包含指定词（用空格分割的词列表之一）的元素含有某个元素</td>
        </tr>
          <tr>
            <td>[attribute|="value"]</td>
            <td>选择具有指定值或者以指定值开头并紧跟着连接字符-的属性值的元素
                如en 或en-
            </td>
        </tr>
          <tr>
            <td>[attribute^="value"]</td>
            <td>选择属性值以指定值开头的元素</td>
        </tr>
          <tr>
          <td>[attribute$="value"]</td>
            <td>选择属性值以指定值结尾的元素</td>
        </tr>
          <tr>
             <td>[attribute*="value"]</td>
            <td>选择属性值中包含指定值的元素</td>
        </tr>
    </table>
    <hr>
    <style>
        input[type]{
            font-size: 50px;
        }
        input[type='password']{
            color: red;
        }
    </style>
    <form action="">
        用户名：<input type="text" name="username">
        密码：<input type="password" name="password">
        <input type="submit" value="提交">
    </form>
    <!--值含有163.字体颜色为绿色-->
<style>
 a[href*='163.']{
            color: green;
        }
</style>
    <a href="http://www.163.com" target="_blank">网易</a>
</body>
</html>